import 'package:flutter/material.dart';
import 'package:x3_base_package/x3_base_package.dart';

///**
///* @fileName: business_depot_style_grid_view_widget
///* @author: hrongyong
///* @date-time: 6/25/21 11:41 AM
///* @email: hrongyong@gmail.com
///* description:  通用商品GridView 展示组件
///* <fileName> <author> <date-time> <email> <description>
///* 文件名 作者姓名 创建时间 作者邮箱 文件描述
///*/
class BusinessDepotStyleGridViewWidget extends StatefulWidget {
  ///数据源
  final List<Map<String, dynamic>> clothingList;

  ///是否需要滚动
  final bool isScroll;

  ///是否显示删除按钮
  final bool showDelete;

  ///是否显示尺寸
  final bool showSizeDesc;

  ///是否显示标签(左上角，和删除按钮不可兼得，删除按钮优先级更高)
  final bool showLabel;

  ///删除事件回调
  final Function(int index) deleteEventCallBack;

  ///点击事件回调
  final Function(int index) onTapEventCallBack;

  ///商品图片key
  final String clothingImageKey;

  ///商品尺寸描述key
  final String sizeDescKey;

  ///商品款号id的key
  final String styleIdKey;

  ///商品颜色描述的key
  final String colorDescKey;

  ///标签的key
  final Widget Function(int index) labelWidget;

  const BusinessDepotStyleGridViewWidget({
    Key key,
    @required this.clothingList,
    this.isScroll = false,
    this.showDelete = true,
    this.showSizeDesc = true,
    this.showLabel = false,
    this.deleteEventCallBack,
    this.onTapEventCallBack,
    this.clothingImageKey = 'image',
    this.sizeDescKey = 'sizeDesc',
    this.styleIdKey = 'styleId',
    this.colorDescKey = 'colorDesc',
    this.labelWidget,
  }) : super(key: key);

  @override
  _BusinessDepotStyleGridViewWidgetState createState() => _BusinessDepotStyleGridViewWidgetState();
}

class _BusinessDepotStyleGridViewWidgetState extends State<BusinessDepotStyleGridViewWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: GridView.builder(
        itemCount: widget.clothingList.length,
        shrinkWrap: true,
        physics: widget.isScroll ? null : NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 0.8),
        itemBuilder: (BuildContext context, int index) {
          return _buildGridViewItem(
            index: index,
            clothing: widget.clothingList[index],
          );
        },
      ),
    );
  }

  Widget _buildGridViewItem({int index, Map<String, dynamic> clothing}) {
    String _clothingImage = BaseUtils.getKeyData(clothing, widget.clothingImageKey, defaultValue: '');
    String _sizeDesc = BaseUtils.getKeyData(clothing, widget.sizeDescKey, defaultValue: '');
    String _styleId = BaseUtils.getKeyData(clothing, widget.styleIdKey, defaultValue: '');
    String _colorDesc = BaseUtils.getKeyData(clothing, widget.colorDescKey, defaultValue: '');
    TextStyle _textStyle = TextStyle(fontSize: 12, color: Color(0xFF333333));
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return InkWell(
          onTap: () {
            if (widget.onTapEventCallBack != null) widget.onTapEventCallBack(index);
          },
          child: Column(
            children: [
              Stack(
                children: [
                  BaseImageComponent(
                    imageUrl: _clothingImage,
                    width: constraints.maxWidth,
                    height: constraints.maxWidth,
                    type: BaseImageTypeEnum.X3Style,
                    size: BaseImageSizeEnum.small,
                    fit: BoxFit.cover,
                  ),
                  if (widget.showDelete || widget.showLabel) Positioned(top: 0, right: 0, child: _labelWidget(index)),
                  if (widget.showSizeDesc) Positioned(right: 0, bottom: 0, child: _buildSizeDesc(_sizeDesc)),
                ],
              ),
              SizedBox(height: 5),
              BaseCopiedText(copiedText: _styleId, copiedTextStyle: _textStyle, suffix: " $_colorDesc", suffixTextStyle: _textStyle, needCopyIcon: false),
            ],
          ),
        );
      },
    );
  }

  Widget _buildSizeDesc(String sizeDesc) {
    if (sizeDesc.isEmpty) return Container();
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 4, vertical: 1),
      alignment: Alignment.centerRight,
      decoration: BoxDecoration(color: Colors.black.withOpacity(0.3), borderRadius: BorderRadius.only(topLeft: Radius.circular(2))),
      child: Text(sizeDesc, style: TextStyle(color: Colors.white, fontSize: 12), maxLines: 1, overflow: TextOverflow.ellipsis),
    );
  }

  Widget _labelWidget(int index) {
    if (widget.showDelete) return _buildDeleteWidget(index);
    if (widget.showLabel && widget.labelWidget != null) return widget.labelWidget(index);
    return Container();
  }

  Widget _buildDeleteWidget(int index) {
    return InkWell(
      onTap: () {
        widget.clothingList.removeAt(index);
        if (widget.deleteEventCallBack != null) widget.deleteEventCallBack(index);
        setState(() {});
      },
      child: Container(
        width: 18,
        height: 18,
        decoration: BoxDecoration(color: Colors.black.withOpacity(0.3), borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4))),
        alignment: Alignment.center,
        child: Icon(Icons.clear, color: Colors.white, size: 18 * 0.8),
      ),
    );
  }
}
